<template>
    <div class="root">
        <div class="root_top">
            <h3>注销账号</h3>
            <div class="root_img">
                <img src="../assets/images/02.png">
            </div>
            <h3 style="margin-top: -25px;">正在注销账号：</h3>
            <p style="margin-top: 10px;">帐号注销后会清空所有信息和数据，且无法被找回</p>

        </div>

        <div class="root_center">
            <!-- <input type="text" placeholder="请输入密码"> -->
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-form-item prop="username">
                        <el-input class="input-size" style="border-top: 1px solid #f6f6f6;" v-model="ruleForm.username" placeholder="请输入用户名" />
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input class="input-size" style="border: 0;" v-model="ruleForm.password" placeholder="请输入密码" />
                    </el-form-item>
                </el-form>
        </div>

        <div class="root_btn">
            <button @click="submit()">确认注销</button>
            <p>获取不到验证码</p>
        </div>

        <div class="root_foot">
            <p>如有疑问，可咨询客服
            <a href="">4007-3333-00</a>
            </p>
        </div>
    </div>
</template>

<script lang="ts" setup>

import {update} from "@/api/productList.js"
import { reactive } from "vue";

let ruleForm = reactive({
    username:"",
    password:""
})



let submit = () =>{
    update(ruleForm)
    .then(res =>{
        console.log(res)
    })
}
</script>


<style lang="scss">
.root{
    .root_top{
        h3{
        font-weight: 800;
        text-align: center;
        padding: 10px 0px 0px 0px;
    }
    .root_img{
        text-align: center;
        img{
            margin: 20px auto;
            width: 100px;
            height: 100px;
            }
        }
        p{
            text-align: center;
            font-size: 14px;
            color: gray;
            line-height: 25px;
        }
    } 
    .root_center{
        padding: 30px 20px 0px 20px;
        .el-input__wrapper{
            box-shadow: 0 0 0 0;
            height: 40px;
        }
    }
    .root_btn{
        margin: 20px;
        padding: 0 20px 0 20px;
        button{
        padding: 15px;
        border-radius: 4px;
        border: 0;
        width: 100%;
        background-color: #ffcc00;
        }
        p{
            font-size: 14px;
            color: gray; 
            float: right;
            padding: 30px 0 30px 0;
        }
    }
    .root_foot{
        text-align: center;
        margin-top: 90px;
        p{
            line-height: 20px;
            font-size: 12px;
            color: #999; 
        }
        a{
            color: blue;
            line-height: 20px;
            font-size: 12px;
        }
    }
}
</style>